<template>
  <view class="page">
    <view class="cu-custom">
      <view class="cu-bar fixed" :style="[{ height: CustomBar + 'px', paddingTop: StatusBar + 'px'}]">
        <view class="action text-white" @tap="back"><text class="cuIcon-back"></text></view>
      </view>
    </view>
    <view class="" style="font-size: 0;">
      <image :src="imgBaseUrl + 'activity/top.png'" lazy-load style="width: 100%;" mode="widthFix">
    </view>
    <view class="page-content padding-lr-sm">
      <view class="content-list bg-white radius-16 padding-top padding-lr" :style="{'min-height':mH+'px'}">
        <view class="top-tab">
          <view class="flex justify-between" :class="{'fixed-box': isFixed}"
            :style="{'paddingTop':isFixed ? StatusBar+'px' : ''}" style="overflow-x: auto;">
            <block v-for="(item,index) in nowTabs" :key="index">
              <view class="flex-sub flex align-center justify-center flex-direction" style="min-width: 160rpx;" @click="tabSelect(index)">
                <text class="text-bold" :class="[index == curIndex ? 'text-333 fu-fs40' : 'fu-fs30 text-333']">{{item.model}}</text>
                <text class="fu-fs20" :class="[index == curIndex ? 'text-white bg-prices padding-lr-15 round line-height-32 height-32' : 'text-999']">{{index == 0 ? i18n['抢购中']: i18n['即将开始']}}</text>
              </view>
            </block>
          </view>
        </view>
        <view class="flex justify-center align-center margin-top" v-if="curIndex == 0 && listData.length != 0">
          <view class="text-333 text-bold fu-fs28">{{i18n['距离本场结束还剩']}}</view>
          <fu-seckill-count-down bgColor="#FE5014" ref="count" class="margin-left-sm" @refresh="init">
          </fu-seckill-count-down>
        </view>
        <view class="margin-top-sm">
          <block v-for="(item,index) in listData" :key="index">
            <view class="list-item padding-tb-sm flex solid-bottom" @click="toDeatil(item)">
              <view class="bg-f8 fu-block-246 margin-right-sm relative" style="border-radius: 24rpx;">
               <!-- <view class="top-left-badge fu-fs20 text-white width-80 height-40 bg-prices flex align-center justify-center">
                	疯抢
                </view> -->
                <fu-image :src="item.thumb" mode="aspectFill" radius="24"></fu-image>
              </view>
              <view class="flex-sub flex flex-direction justify-between">
                <view class="fu-fs28 text-333 text-cut-2 text-bold">{{item.name}}</view>
                <view class="flex align-center" v-if="curIndex == 0">
                	<view class="cu-progress round xs" style="width: 65%;">
                		<view class="bg-theme" :style="{ width: item.rate + '%' }"></view>
                	</view>
                	<text class="text-999 text-xs margin-left-sm">{{item.rate + '%'}}</text>
                </view>
                <view class="text-xs text-999 text-cut" v-if="curIndex == 0">
                	<text>{{item.sales_sum}}人成功秒杀</text>
                	<text v-if="(item.sales_sum != 0) && (item.discounts != 0)" class="margin-left-xs">
                		成功为他们省了{{item.sales_sum * item.discounts | filterPrice}}元
                	</text>
                </view>
                <view class="flex align-center justify-between">
                  <view class="flex flex-direction">
					  <view class=" text-sm ">
					  	<text class="" style="color: #EF3A3A;">秒杀价</text>
					  </view>
                    <view class="text-cut">
                    	<text class="text-price text-sm text-prices"></text>
                    	<text class="text-xl text-prices text-bold text-cut">{{item | filterGoodsPrice}}</text>
                    </view>
                 
                  </view>
				  <!-- width-205 -->
                  <view class="action  flex" v-if="curIndex == 0">
                  	<!-- <view class="width-70 flex align-center justify-center flex-direction fu-fs20" style="color: #B16E05;">
                  		<text>返</text>
                  		<text class="text-bold">{{item.discounts}}</text>
                  	</view> -->
                  	<view class="flex-sub  fu-fs26  line-height-64 text-center justify-center"  style="min-width: 1px;" v-if="item.rate !== 100">
						<view class="qiang-border" style="">
							<text class="title">马上抢</text>
						</view>
                  	</view>
                  	<view class="flex-sub text-white fu-fs26  line-height-64 text-center" v-else @tap.stop="">
                  		<text class="title">抢光了</text>
                  	</view>
                  </view>
                  <view v-else>
                   <view class="bg-theme text-white width-140 height-56 line-height-56 fu-fs28 radius-8 flex align-center justify-center">
                    	<text class="title" @click.stop="">敬请期待</text>
                    </view>
<!--                  	<view class="bg-theme text-white width-140 height-56 line-height-56 fu-fs28 radius-8 flex align-center justify-center" v-if="!(item.message_notify && item.message_notify == 'true')">
                  		<text class="title" @click.stop="handleRemind(item)">提醒我</text>
                  	</view>
                  	<view class="line-theme solid width-140 height-56 line-height-56 fu-fs28 radius-8 flex align-center justify-center" v-else>
                  		<text class="title" @click.stop="handleUnRemind(item)">取消提醒</text>
                  	</view> -->
                  </view>
                </view>
              </view>
            </view>
          </block>
          <!-- 空列表展示 -->
          <view class="text-center flex flex-direction align-center justify-center" v-if="listData.length == 0 && pagingListNoListData">
            <image class="fu-block-300" :src="imgBaseUrl + 'empty/collect.png'" mode="aspectFill"></image>
            <text class="text-999 fu-fs28">{{i18n['本场次没有商品哦']}}</text>
          </view>
        </view>
      </view>
    </view>
    <fu-notwork></fu-notwork>
  </view>
</template>

<script>
  const _tabs = [{
      model: '00:00',
      text: global.i18n['即将开始'],
      start: 0
    },
    {
      model: '02:00',
      text: global.i18n['即将开始'],
      start: 2
    },
    {
      model: '04:00',
      text: global.i18n['即将开始'],
      start: 4
    },
    {
      model: '06:00',
      text: global.i18n['即将开始'],
      start: 6
    },
    {
      model: '08:00',
      text: global.i18n['即将开始'],
      start: 8
    },
    {
      model: '10:00',
      text: global.i18n['即将开始'],
      start: 10
    },
    {
      model: '12:00',
      text: global.i18n['即将开始'],
      start: 12
    },
    {
      model: '14:00',
      text: global.i18n['即将开始'],
      start: 14
    },
    {
      model: '16:00',
      text: global.i18n['即将开始'],
      start: 16
    },
    {
      model: '18:00',
      text: global.i18n['即将开始'],
      start: 18
    },
    {
      model: '20:00',
      text: global.i18n['即将开始'],
      start: 20
    },
    {
      model: '22:00',
      text: global.i18n['即将开始'],
      start: 22
    },
  ];

  import FuSeckillCountDown from "../../components/fu-seckill-count-down/fu-seckill-count-down.vue"
  import pagingList from '@/common/mixin/paging_list.js' //引入混合开发
  export default {
    mixins: [pagingList],
    components: {
      FuSeckillCountDown
    },
    data() {
      return {
        CustomBar: this.CustomBar,
        StatusBar: this.StatusBar,
        minixPagingListsApi: global.apiUrls.postSeckillList, //明细请求地址
        pageingListApiMethod: "post", //请求方法
        allowOnloadGetList: false, // 是否允许页面onload生命周期进入后立马执行getlist
        tabs: Object.freeze(_tabs),
        curIndex: 0,
        nowTabs: [],
        start: 0,
        isFixed: false,
      };
    },
    computed: {
      mH() {
        let H = uni.getSystemInfoSync().windowHeight;
        let h = uni.upx2px(562);
        return H - h;
      }
    },
    methods: {
      /**
       * @description  设置要请求的参数
       * 在混入开发时，调用该方法和混入的请求参数合并在一起
       */
      pagingListPostData() {
        return {
          start_time: this.start,
          end_time: this.start + 2,
          type: 1,
          user_id: global.userInfo && global.userInfo.id || 0,
        }
      },
      // 初始化 ok
      init() {
        let nowDate = new Date();
        let _hour = nowDate.getHours();
        let _count;
        if (_hour % 2 === 0) {
          _count = _hour;
        } else {
          _count = _hour - 1;
        }
        let _startIndex = _count / 2;
        const _tabs = this.tabs.filter((item, index) => {
          return index >= _startIndex && index <= _startIndex + 5
        })
				if (_tabs.length < 5) {
					let _len = 5 - _tabs.length;
					for (let i = 0; i < _len; i++) {
						_tabs.push(this.tabs[i])
					}
				}
        this.nowTabs = _tabs;
        this.start = this.nowTabs[0].start;
        this.pagingListToggle();
      },

      tabSelect(index) {
        this.curIndex = index;
        this.start = this.nowTabs[index].start;
        this.pagingListToggle();
      },
      // 发送通知
      handleRemind(item) {
        const {
          goods_id,
          activity_id,
          activity_type,
          sku_id
        } = item;
        this.$util.actionAuth(() => {
          let _notifyTime = (Math.abs(this.start - 1)).toString().padStart(2, '0') + ':57'
          // #ifdef MP-WEIXIN
          uni.requestSubscribeMessage({
            tmplIds: ['x3ljpUAnxYgi-u6iQcaRuP-Z3fVoJ5o22KTDqiNhPMk'],
            complete: () => {
              this.$api.post(global.apiUrls.postSendNotice, {
                  goodsId: goods_id,
                  pageUrl: `/pages/activity/seckill/seckill-detail/index?id=${goods_id}&sku_id=${sku_id}&activity_id=${activity_id}`,
                  type: 1,
                  notifyTime: _notifyTime,
                })
                .then(res => {
                  res = res.data;
                  console.log('消息通知', res);
                  if (res.code == 1) {
                    this.$message.info(this.i18n['设置成功,将在开抢前三分钟收到提醒']);
                    this.loadData();
                  } else {
                    this.$message.info(res.msg);
                  }
                })
                .catch(err => {
                  this.$message.info(this.i18n['该功能暂未开发']);
                  console.log(err);
                })
            },
          })
          // #endif
          // #ifdef APP-PLUS
          this.$api.post(global.apiUrls.postSendNotice, {
              goodsId: goods_id,
              pageUrl: `/pages/activity/seckill/seckill-detail/index?id=${goods_id}&sku_id=${sku_id}&activity_id=${activity_id}`,
              type: 2,
              notifyTime: _notifyTime,
            })
            .then(res => {
              res = res.data;
              console.log('消息通知', res);
              if (res.code == 1) {
                this.$message.info(this.i18n['设置成功,将在开抢前三分钟收到提醒']);
                this.loadData();
              } else {
                this.$message.info(res.msg);
              }
            })
            .catch(err => {
              this.$message.info(this.i18n['该功能暂未开发']);
              console.log(err);
            })

          // #endif
          // #ifdef H5
          this.$message.info(this.i18n['H5不支持推送功能']);
          // #endif
        })
      },
      // 取消通知
      handleUnRemind(item) {
        console.log('来了')
        const {
          goods_id
        } = item;
        this.$util.actionAuth(() => {
          // #ifdef MP-WEIXIN
          let _notifyTime = (Math.abs(this.start - 1)).toString().padStart(2, '0') + ':57'
          this.$api.post(global.apiUrls.postCancelNotice, {
              goodsId: goods_id,
              type: 1,
              notifyTime: _notifyTime,
            })
            .then(res => {
              console.log('取消通知', res);
              if (res.data.code == 1) {
                this.$message.info(this.i18n['秒杀提醒已取消,您可能会抢不到']);
                this.loadData();
              } else {
                this.$message.toast(res.data.msg);
              }
            })
            .catch(err => {
              console.log(err);
            })
          // #endif
          // #ifdef APP-PLUS
          let _notifyTime = (Math.abs(this.start - 1)).toString().padStart(2, '0') + ':57'
          this.$api.post(global.apiUrls.postCancelNotice, {
              goodsId: goods_id,
              type: 2,
              notifyTime: _notifyTime,
            })
            .then(res => {
              console.log('取消通知', res);
              if (res.data.code == 1) {
                this.$message.info(this.i18n['秒杀提醒已取消,您可能会抢不到']);
                this.loadData();
              } else {
                this.$message.info(res.data.msg);
              }
            })
            .catch(err => {
              console.log(err);
            })
          // #endif
          // #ifdef H5
          this.$message.info(this.i18n['H5不支持推送功能']);
          // #endif

        })
      },
      // 去详情页
      toDeatil(item) {
        if (this.curIndex != 0) return;

        this.$urouter.navigateTo({
          url: '/pages/activity/seckill/seckill-detail/index',
          params: {
            goods_id: item.goods_id,
            sku_id: item.sku_id || 0,
            activity_id: item.activity_id || 0,
          }
        });
      },
      back() {
        uni.navigateBack();
      }
    },
    onLoad() {
      this.init();
    },
    onPageScroll(e) {
      let top = e.scrollTop;
      if (top > 250) {
        this.isFixed = true;
      } else {
        this.isFixed = false;
      }
    }
  }
</script>

<style lang="scss" scoped>
  .page {
    min-height: 100vh;
    background: #C7111D;
    .bg-prices {
      background: $theme;
    }
    .list-item{
      .top-left-badge{
        position: absolute;
      	top: 0;
      	left: 0rpx;
      	z-index: 999;
      	border-radius: 24rpx 0rpx 24rpx 0rpx;
      }
    	.action{
    		// background: url($IMG_BASE_URL + 'activity/rob.png');
    		// background-size: cover;
    		// background-repeat: no-repeat;
			background-color: $theme;
			border-radius: 8rpx;
			color: #FFE1C6;
			font-size: 24rpx;
			width: 160rpx;
			text-align: center;
			line-height: 48rpx;
        // .title{
        // 	animation: heart 1s infinite;
        // }
    	}
    }
  }
  @keyframes heart{
  	0%{
  		font-size: 20rpx;
  	}
  	50%{
  		font-size: 26rpx;
  	}
  	100%{
  		font-size: 20rpx;
  	}
  }
  .qiang-border{
	  margin: 4rpx;
	  border-radius: 6rpx;
	  opacity: 1;
	  border: 1rpx solid #FFE1C6;
  }
</style>
